<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue">
			<block slot="content">
				<view class="action sub-title">
					<text class="text-xl text-bold text-white">登录</text>
					<text class="text-ABC text-white">login</text>
				</view>
			</block>
		</cu-custom>
		
		<!-- <view class="cu-bar justify-center bg-white">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue">登录</text>
				<text class="text-ABC text-blue">login</text>
			</view>
		</view> -->
		
		<view class="bg-white padding">
			<view class="cu-steps">
				<view class="cu-item" :class="index>step?'':'text-blue'" v-for="(item,index) in basicsList" :key="index">
					<text :class="'cuIcon-' + item.cuIcon"></text> {{item.name}}
				</view>
			</view>
		</view>
		
		<template v-if="step==0">
			<view class="cu-bar bg-white solid-bottom margin-top-xs">
				<view class="action">
					<text class="cuIcon-title text-cyan"></text>请把身份证放在指定设备上检查
				</view>
			</view>
			
			<form action="" class="text-grey">
				<view class="cu-form-group">
					<view class="title">姓名</view>
					<input type="text"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">证件号</view>
					<input type="text"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">签发机关</view>
					<input type="text"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">有效期限</view>
					<input type="text"></input>
				</view>
			</form>
		</template>
		
		<template v-if="step==1">
			<view class="cu-bar bg-white solid-bottom margin-top-xs">
				<view class="action">
					<text class="cuIcon-title text-cyan"></text>请对准摄像头拍照
				</view>
			</view>
			<view class="bg-white ">
				拍照功能。。。
			</view>
		</template>
		
		<template v-if="step==2">
			<view class="cu-bar bg-white solid-bottom margin-top-xs">
				<view class="action">
					<text class="cuIcon-title text-cyan"></text>恭喜你识别成功
				</view>
			</view>
			<view class="cu-load load-modal" v-if="loadModal">
				<!-- <image src="/static/logo.png" mode="aspectFit"></image> -->
		
				<view class="gray-text">登录中...</view>
			</view>
		</template>
		
		<view class="cu-bar bg-white solid-bottom margin-top-xs" style="flex-direction: row-reverse" v-if="step!=2">
			<view class="action" >
				<button class="cu-btn bg-green shadow" @tap="BasicsSteps">下一步</button>
			</view>		
		</view>
			

		
	</view>
</template>

<script>
	let _this = null
	export default {
		data() {
			return {
					basicsList: [{
					cuIcon: 'newsfill',
					name: '刷身份证'
				}, {
					cuIcon: 'recordfill',
					name: '人脸比对'
				}, {
					cuIcon: 'roundcheckfill',
					name: '完成'
				}, ],
				step: 0,
				loadModal: false,
			}
		},
		created () {
			_this = this;
		},
		methods: {
			BasicsSteps() {
				this.step= this.step == this.basicsList.length - 1 ? 0 : this.step + 1;	
				this.$nextTick(() => {
					if (_this.step ==2) {
						setTimeout(() => {
							_this.loadModal = true;
						}, 500)
						setTimeout(() => {
							_this.loadModal = false;
							uni.switchTab({
								url:"/pages/index/index"
							})
						}, 1000)

					}
					
				})
			},
		}
	}
</script>

<style scoped>
.cu-form-group .title {
	min-width: calc(4em + 15px);
}
</style>
